<template>
	<div class="login-container">
		<!-- 左侧图片区域 -->
		<div class="login-left">
			<img src="../assets/LoginBackground.jpg" alt="登录背景图">
			<!-- 在图片容器内添加表单 -->
			<div class="login-image-form">
				<img src="../assets/Login.png" alt="登录表单背景" />
			</div>
			<div class="login-form">
				<el-form :model="loginForm" :rules="loginRules" ref="loginForm">
					<el-form-item prop="uname">
						<el-input v-model="loginForm.uname" prefix-icon="el-icon-user" placeholder="用户名">
						</el-input>
					</el-form-item>

					<el-form-item prop="pwd">
						<el-input v-model="loginForm.pwd" prefix-icon="el-icon-lock" type="password"
							placeholder="密码" show-password>
						</el-input>
					</el-form-item>

					<el-form-item>
						<img src="../assets/LoginButton.png" class="login-button" @click="handleLogin" :loading="loading"/>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				loginForm: {
					uname: '',
					pwd: ''
				},
				loginRules: {
					uname: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					pwd: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							message: '密码长度不能少于6位',
							trigger: 'blur'
						}
					]
				},
				loading: false
			}
		},
		methods: {
			handleLogin() {
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						// if(this.loginForm.password == "yili_250415" && this.loginForm.username == "yili_manager"){
						// 	this.$router.push("/product")
						// }
						this.login();
					}
				})
			},
		  async	login(){
		
		        const response = await this.$api.account.login(this.loginForm);
		        
		        // 关键：先检查响应是否为null或非对象
		        
		        // 安全解构响应数据
		        const code = response.code ?? -1;
		        const message = response.message || "操作失败";
		        const data = response.data || {};
		        if (code === 0) {
		            // 登录成功处理
		                localStorage.setItem("userInfo", JSON.stringify(data.userInfo));
		                localStorage.setItem("token", data.token);
		                this.$router.push("/index");
		                this.$message.success(message);
		        } else {
		            // 登录失败处理
		            this.$message.error(message);
		        }
		    // } catch (error) {
		    //     // 捕获所有异常（包括响应为null的情况）
		    //     console.error("登录异常:", error);
		    //     this.$message.error("登录失败，请检查账号密码或网络");
		    // }
			
		}
	},
	}
</script>

<style>
	.login-container {
			height: 100vh;
			overflow: hidden;
		}
	
		.login-left {
			position: relative; /* 设置相对定位 */
			width: 100%;
			height: 100%;
		}
	.login-button{
		width: 50px; /* 设置固定宽度 */
		  height: auto; /* 高度自动调整以保持比例 */
		  max-width: 40%; /* 最大宽度不超过父容器的40% */
		  display: block; /* 使图片成为块级元素 */
		  margin: 0px auto;/* 上下10px边距，水平居中 */
		  cursor: pointer; /* 添加指针样式表示可点击 */
	}
		.login-left img {
			width: 100%;
			height: 100%;
			object-fit: cover; /* 保持图片比例并覆盖整个区域 */
		}
		.login-image-form{
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.login-image-form img{
			max-width: 50%;
			max-height: 50%;
			object-fit: contain;
		}
	
		.login-form {
			position: absolute; /* 绝对定位 */
			top: 55%; /* 垂直居中 */
			left: 50%; /* 水平居中 */
			transform: translate(-50%, -50%); /* 精确居中 */
			width: 400px; /* 固定宽度 */
			padding: 30px;
			border-radius: 8px;
			
		}
	
		.login-form .title {
			margin-bottom: 30px;
			text-align: center;
			color: #333;
		}
	
		.login-form .el-button {
			width: 100%;
		}
	
		@media (max-width: 768px) {
			.login-form {
				width: 80%; /* 移动端宽度 */
				padding: 20px;
			}
		}
</style>